<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-form size="small" label-width="80px" style="margin-bottom: 16px;">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" style="height: 36px;">
              <el-form-item label="业务日期">
                <div class="flex flex-row">
                  <el-date-picker
                    v-model="dataForm.orderStartDate"
                    align="right"
                    unlink-panels
                    class="fl1"
                    value-format="yyyy-MM-dd"
                    placeholder="开始日期"
                    style="width: 100%;"
                  />
                  <el-date-picker
                    v-model="dataForm.orderEndDate"
                    align="right"
                    unlink-panels
                    class="fl1"
                    value-format="yyyy-MM-dd"
                    placeholder="结束日期"
                    style="width: 100%;"
                    :disabled="!dataForm.orderStartDate"
                    :pickerOptions="pickerOptions"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户名称">
                <zSelect
                  multiple
                  :value.sync="dataForm.customerIds"
                  url="api/dropDown/basCustomerList"
                  style="width: 100%;line-height: 1;"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户分类">
                <v-tree-select
                  v-model="dataForm.customerTypeIds"
                  placeholder="客户分类"
                  url="api/dropDown/basCustomerTypeTree"
                  multiple
                  value-consists-of="ALL_WITH_INDETERMINATE"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户区域">
                <v-tree-select
                  v-model="dataForm.customerAreaIds"
                  placeholder="客户区域"
                  url="api/dropDown/basCustomerAreaTree"
                  multiple
                  value-consists-of="ALL_WITH_INDETERMINATE"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="商品名称">
                <table-select
                  :tableColumns="[{prop:'goodsCode',label:'商品编码',width:'100'},{prop:'goodsName',label:'商品名称',width: '280'}]"
                  labelKey="goodsName"
                  valueKey="goodsId"
                  :value.sync="dataForm.goodsIds"
                  placeholder="请选择商品"
                  url="/api/dropDown/basGoodsListForAdd"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="商品品牌">
                <table-select
                  :tableColumns="[{prop:'code',label:'品牌编码',width:'100'},{prop:'name',label:'品牌名称',width: '280'}]"
                  :value.sync="dataForm.goodsBrandIds"
                  placeholder="商品品牌"
                  url="/api/dropDown/basGoodsBrandList"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="商品分类">
                <v-tree-select
                  v-model="dataForm.goodsTypeIds"
                  placeholder="商品分类"
                  url="api/dropDown/basGoodsTypeTree"
                  multiple
                  value-consists-of="ALL_WITH_INDETERMINATE"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-button class="filter-item" size="mini" type="primary" @click="doQuery">搜索</el-button>
              <el-button class="filter-item" size="mini" type="primary" plain @click="doReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        border
        v-loading="loading"
        :data="tableData"
        size="small"
        height="700"
        style="width: 100%;"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="业务日期" prop="busDate" />
        <el-table-column label="促销名称" prop="promotionName" />
        <el-table-column label="单据编码" prop="orderCode">
          <template slot-scope="scope">
            <div class="codeJump" @click="jump(scope.row)">{{ scope.row.orderCode }}</div>
          </template>
        </el-table-column>
        <el-table-column label="客户编号" prop="customerCode" />
        <el-table-column label="客户名称" prop="customerName" />
        <el-table-column label="客户区域" prop="customerAreaName" />
        <el-table-column label="客户分类" prop="customerTypeName" />
        <el-table-column label="商品编码" prop="goodsCode" />
        <el-table-column label="商品名称" prop="goodsName" />
        <el-table-column label="商品品牌" prop="goodsBrandName" />
        <el-table-column label="商品分类" prop="goodsTypeName" />
        <el-table-column label="数量" prop="goodsCount" />
        <el-table-column label="辅数量" prop="mergedGoodsCount" />
        <el-table-column label="金额" prop="taxAmount" />
      </el-table>
      <!--分页组件-->
      <pagination :page.sync="query.page" :limit.sync="query.size" :total="total" @pagination="initData" />
    </div>
  </div>
</template>

<script>
import { queryDetail } from '@/api/erp/reportSalePromotion'
import Pagination from '@/components/Pagination'
import VSelect from '@/components/VSelect'
import VTreeSelect from '@/components/VTreeSelect'

const defaultForm = {
  promotionId: null,
  orderStartDate: null,
  orderEndDate: null,
  customerIds: [],
  customerTypeIds: null,
  customerAreaIds: [],
  goodsIds: null,
  goodsBrandIds: null,
  goodsTypeIds: []
}
export default {
  name: 'reportSalePromotionDetail',
  components: {
    Pagination,
    VSelect,
    VTreeSelect
  },
  dicts: ['t_sales_promotion_customer_group_type'],
  data() {
    return {
      loading: false,
      downloadLoading: false,
      tableData: [],
      total: 0,
      query: {
        page: 1,
        size: 10
      },
      dataForm: Object.assign({}, defaultForm, { promotionId: this.$route.params.id })
    }
  },
  computed: {
    pickerOptions() {
      const startTime = this.dataForm.orderStartDate
      return {
        disabledDate(time) {
          return time.getTime() < new Date(startTime).getTime() - 3600 * 1000 * 24
        }
      }
    }
  },
  activated() {
    this.dataForm = Object.assign(this.dataForm, this.$route.query)
    this.initData()
  },
  methods: {
    doQuery() {
      this.query.page = 1
      this.initData()
    },
    doReset() {
      this.dataForm = Object.assign({}, defaultForm, { promotionId: this.$route.params.id })
      this.dataForm.customerIds = []
      this.initData()
    },
    initData() {
      this.loading = true
      const { customerIds, customerTypeIds, customerAreaIds, goodsTypeIds } = this.dataForm
      const data = Object.assign({}, this.dataForm, this.query, {
        customerIds: (customerIds || []).join(),
        customerTypeIds: (customerTypeIds || []).join(),
        customerAreaIds: (customerAreaIds || []).join(),
        goodsTypeIds: (goodsTypeIds || []).join()
      })
      queryDetail(data).then((res) => {
        this.tableData = res.data.content
        this.total = res.data.totalElements
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    jump(row) {
      this.$router.push({ path: '/sale/salesorderDetail/' + row.orderId })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}

.flex {
  display: flex;
}

.fow-reverse {
  flex-direction: row-reverse;
}

.codeJump {
  color: blue;
}
</style>
